<template>
  <div class="logo" style="margin:0 auto; width: 1000px; margin-top: 100px;">
    <img src="../assets/logo.png" alt="" style="width: auto; height: auto; margin-left: 20px;">
  </div>
  <div class="bigbox">
    <div class="image">
      <img src="../assets/登录.png" alt="" style="width: 100%; height: auto;" >
    </div>
    <div class="login">
      <h1 style="text-align: center;">登录</h1>
      <el-form :model="user" label-width="auto" style="width: 300px; padding-left: 28px;">
        <el-form-item>
          <el-input v-model="user.username" placeholder="用户名/手机号/邮箱"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.password" placeholder="密码" type="password" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="login">登录</el-button><br><br>
      <a :href="href">
        <el-button type="primary">钉钉登录</el-button>
      </a><br><br>
      <el-button type="primary" @click="router.push('/register')">没有账号？点击注册</el-button>
    </div>
  </div>

</template>

<style scoped>
  .bigbox{
    width: 1000px;
    height: 400px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    border: 2px, solid, black;
    border-radius: 10px;
  }
  .image{
    width: 648px;
    height: 400px;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .login{
    width: 352px;
    height: 500px;
    align-items: center;
    text-align: center;
    float: left;
  }
  .el-input{
    width: 300px;
    height: 45px;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";
  import http from "../http"

  const route = useRoute()
  const router = useRouter()

  let href = ref("")

  let user = ref({
    username: "",
    password: "",
  })

  const login=()=>{
    axios.post(`http://127.0.0.1:8000/user/jwt/access/`, user.value)
    .then(res=>{
      console.log(res)
      localStorage.setItem("access_token", res.data.access)
      localStorage.setItem("refresh_token", res.data.refresh)
      router.push("/homepage")
    })
    .catch(error=>{
      console.log(error)
      alert("用户名或密码错误")
    })
  }

  const dingdinglogin=()=>{
    http.get("user/dingtalklogin/?types=dingding")
    .then(res=>{
      console.log(res)
      href.value = res.data.url
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    dingdinglogin()
  })

</script>
